<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 8]>
<html id="ie8" lang="en">
<![endif]-->
<!--[if !(IE 8)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Something great!! | Web App</title>
    <link href="css/ui-lightness/jquery-ui-1.10.1.custom1.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
</head>
<body>
<div id="mainContainer">
    <div id="header">
        <span>Something Awesome!</span>
        <ul id="navigationLinks">
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">Credits</a>
            </li>
            <li>
                <a href="#">Visit Our Website</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <div id="loadingMsgBox">
            <p>Loading something awesome..</p>
        </div>
        <ul id="contentLayout">
            <li>
                <div id="controls">
                    <ul class="controlContainer">
                        <li>
                            <input id="brushBtn" type="button" value="Brush" class="sidebyside">
                            <input id="paintBucketBtn" type="button" value="Paint Bucket">
                            <div class="collapsibleContainer" id="collapsibleContainer1">
                                <p>Choose Brush size</p>
                                <div class="brushSizeBtnGroup">
                                    <button class="btn active" id="small">
                                        <div class="small">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="med">
                                        <div class="med">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="large">
                                        <div class="large">&nbsp;</div>
                                    </button>
                                </div>
                            </div>
                        </li>
                        <li class="ui-state-default ui-corner-all" style="padding:10px 0 10px 10px; margin-bottom:10px;">
                            <div style="width:175px; height:10px; margin-bottom:10px; ">
                                <div id="preview" style="width:83px; height:10px; float:left; border:1px solid #9a9a9a;"></div>
                                <div id="pick" style="width:83px; height:10px; float:right; border:1px solid #9a9a9a;"></div>
                            </div>
                            <canvas id="colorPicker" width="175" height="140" style="border:1px solid #9a9a9a;">
                                HTML5 Canvas Not Supported
                            </canvas>
                        </li>
                        <li>
                            <input id="eraserBtn" type="button" value="Eraser" class="btnControls">
                            <div class="collapsibleContainer" id="collapsibleContainer3">
                                <p style="">Choose Eraser size</p>
                                <div class="brushSizeBtnGroup">
                                    <button class="btn active" id="eraserSmall">
                                        <div class="small">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="eraserMed">
                                        <div class="med">&nbsp;</div>
                                    </button>
                                    <button class="btn" id="eraserLarge">
                                        <div class="large">&nbsp;</div>
                                    </button>
                                </div>
                            </div>
                        </li>
                        <li>
                            <input type="button" value="Clear All" id="clearBtn" class="btnControls"/>
                        </li>
                    </ul>
                    <!--<input type="button" value="Get Login Status" onclick="getLoginStatus()">-->
                </div>
            </li>
            <li>
                <div id="drawingCanvasHolder" class="ui-state-default ui-corner-all" style="position:relative; background:#d9d8d8; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  border-bottom: 1px solid rgba(0,0,0,0.25);">
                    <div id="sponsorBox">
                        <span>Sponsor</span>
                    </div>
                    <canvas id="paintBox">
                        <p>Sorry, you need to have a browser that supports HTML5 Canvas</p>
                    </canvas>
                    <div id="screenHolder">
                        <div id="loadingScreen">
                            <p>Welcome to "Something new"</p>
                            <p>Just express yourself</p>
                            <p>Share it with the world</p>
                            <p>Choose your region - coming soon</p>
                            <input id="readyBtn" type="button" value="Yes, I am Ready"/>
                        </div>
                    </div>
                    <div id="userFormBox">
                        <table>
                            <tr>
                                 <td colspan="2">
                                    <span style="color:red; text-shadow:none;">My Name is </span><input id="myNameIsInput" type="text">
                                 </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <span style="color:#000; text-shadow:none;">& I draw my heart to conquer childhood obesity - mind, heart & body - with <span style="color:red;">Heart</span>ESTEEM!</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span style="color:red; text-shadow:none;">City: </span><input id="cityInput" class="cityDate" type="text"/>
                                </td>
                                <td>
                                    <span style="color:red; text-shadow:none;">Date: </span><input id="dateInput" class="cityDate" type="text"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--<ul id="doneMsgBox">
                        <li style="width:320px; padding-top:12px;">
                            <p>When you are done click on the "Done" button</p>
                        </li>
                        <li style="padding-top:7px;">
                            <div id="doneBtn">Done</div>
                        </li>
                    </ul> -->
                </div>
            </li>
            <li id="helpContainer">
                <table>
                    <tr>
                        <td><img src="assets/icons/help.png"/></td>
                        <td><span id="helpBtn">Help links</span></td>
                    </tr>
                    <tr>
                        <td><img src="assets/icons/fb.png"/></td>
                        <td><span id="sharePhotoFB">Share Photo</span></td>
                    </tr>
                    <tr>
                        <td><img src="assets/icons/fb.png"/></td>
                        <td><span id="shareFBWall">Share on Wall</span></td>
                    </tr>
                    <tr>
                        <td><img src="assets/icons/save.png"/></td>
                        <td><span id="saveBtn">Save Drawing</span></td>
                    </tr>
                </table>
                <div>
                    <p>Please take a note of our Sponsors</p>
                </div>
                <!--<ul>
                    <li class="ui-state-default ui-corner-all" title="Help" style="width:50px; text-align:center;">
                        <span class="ui-icon ui-icon-help"></span>
                        Help
                    </li>
                    <li>
                        <input type="button" value="Share Photo" id="sharePhotoFB" class="btnControls sharingBtn ui-button ui-widget ui-state-default ui-corner-all">
                    </li>
                    <li>
                        <input type="button" value="Share on Wall" id="shareFBWall" class="btnControls sharingBtn ui-button ui-widget ui-state-default ui-corner-all">
                    </li>
                    <li>
                        <input type="button" value="Facebook Logout" id="logoutFB" class="btnControls">
                    </li>
                    <li>
                        <img src="assets/icons/tw.png"/><input type="button" value="Share on Google+" class="btnControls">
                    </li>
                    <li>
                        <input type="button" value="Share on Twitter" class="btnControls">
                    </li>
                    <li>
                        <input type="button" value="Email" class="btnControls">
                    </li>
                    <li>
                        <input type="button" value="Save Drawing" class="btnControls" id="saveBtn">
                    </li>
                </ul>-->
            </li>
        </ul>
    </div>
    <div id="footer">
        <p>Terms of Use | Privacy Policy | Trademarks | Contact</p> <!-- | Liked our web app? Now draw on the go - Android | iPhone -->
    </div>
</div>
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
    appId      : '484654311585545',// Heart App created in FB - App ID
    //channelUrl : '//www.heartesteem.ca/test/channel.html', // Channel File
    //status     : true, // check login status, use either FB.getLoginStatus() or this
    cookie     : true // enable cookies to allow the server to access the session
    //xfbml      : true  // parse XFBML
    });
    };

    // Load the SDK Asynchronously
    (function(d){
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
    }(document));
</script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.1.custom1.js"></script>
<script src="js/diQuery-collapsiblePanel.js"></script>
<script type="text/javascript" src="js/paint_bucket1.js"></script>
<script type="text/javascript" src="js/app_jquery.js"></script>
</body>
</html>